import React, { Component } from 'react'
import './index.css';

export default class List extends Component {
    render() {
        const { showdata } = this.props;//从父组件拿到  根据搜索内容得到的对象数组
        console.log('showdata', showdata);
        return (
            //遍历对象数组  拿到每一个单个的对象，如下有详细例子
            <div className="row">
                {
                    
                    showdata.map(item => {
                        const { id, avatar_url, html_url, login } = item;
                        return (
                            <div key={id} className="card">
                                <a href={html_url} target="_blank" rel="noreferrer">
                                    <img src={avatar_url} style={{ width: '100px' }} alt='avatar' />
                                </a>
                                <p className="card-text">{login}</p>
                            </div>
                        )
                    })
                }

            </div>
        )
    }
}

/*
 {
      "login": "Aakashdeveloper",
      "id": 7868704,
      "node_id": "MDQ6VXNlcjc4Njg3MDQ=",
      "avatar_url": "https://avatars.githubusercontent.com/u/7868704?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/Aakashdeveloper",
      "html_url": "https://github.com/Aakashdeveloper",
      "followers_url": "https://api.github.com/users/Aakashdeveloper/followers",
      "following_url": "https://api.github.com/users/Aakashdeveloper/following{/other_user}",
      "gists_url": "https://api.github.com/users/Aakashdeveloper/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/Aakashdeveloper/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/Aakashdeveloper/subscriptions",
      "organizations_url": "https://api.github.com/users/Aakashdeveloper/orgs",
      "repos_url": "https://api.github.com/users/Aakashdeveloper/repos",
      "events_url": "https://api.github.com/users/Aakashdeveloper/events{/privacy}",
      "received_events_url": "https://api.github.com/users/Aakashdeveloper/received_events",
      "type": "User",
      "site_admin": false,
      "score": 1.0
    },

*/
